@import './_fieldControl.scss';

.amplify-select__wrapper {
  flex: var(--amplify-components-select-wrapper-flex);
  display: var(--amplify-components-select-wrapper-display);
  position: var(--amplify-components-select-wrapper-position);
  cursor: var(--amplify-components-select-wrapper-cursor);
  align-self: stretch;
}

.amplify-select__icon {
  color: var(--amplify-components-fieldcontrol-color);
  align-items: var(--amplify-components-select-icon-wrapper-align-items);
  position: var(--amplify-components-select-icon-wrapper-position);
  top: var(--amplify-components-select-icon-wrapper-top);
  right: var(--amplify-components-select-icon-wrapper-right);
  transform: var(--amplify-components-select-icon-wrapper-transform);
  pointer-events: var(--amplify-components-select-icon-wrapper-pointer-events);

  &--small {
    right: var(--amplify-components-select-icon-wrapper-small-right);
  }

  &--large {
    right: var(--amplify-components-select-icon-wrapper-large-right);
  }
}

.amplify-select {
  @include amplify-field-control;
  // default styles
  background-color: var(--amplify-components-select-background-color);
  color: var(--amplify-components-select-color);
  min-width: var(--amplify-components-select-min-width);
  padding-inline-end: var(--amplify-components-select-padding-inline-end);
  white-space: var(--amplify-components-select-white-space);
  option {
    background-color: var(--amplify-components-select-option-background-color);
    color: var(--amplify-components-select-option-color);
    &[disabled=''] {
      background-color: var(
        --amplify-components-select-option-disabled-background-color
      );
      color: var(--amplify-components-select-option-disabled-color);
      cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
    }
  }
  &[disabled] {
    background-color: var(
      --amplify-components-select-disabled-background-color
    );
    color: var(--amplify-components-select-disabled-color);
    option {
      color: inherit;
      background-color: inherit;
    }
  }

  &--small {
    min-width: var(--amplify-components-select-small-min-width);
    padding-inline-end: var(
      --amplify-components-select-small-padding-inline-end
    );
  }

  &--large {
    min-width: var(--amplify-components-select-large-min-width);
    padding-inline-end: var(
      --amplify-components-select-large-padding-inline-end
    );
  }

  &--expanded {
    overflow: auto;
    padding: var(--amplify-components-select-expanded-padding-block)
      var(--amplify-components-select-expanded-padding-inline);

    option {
      padding: var(--amplify-components-select-expanded-option-padding-block)
        var(--amplify-components-select-expanded-option-padding-inline);
    }
  }
}
